<template>
  <div>
    <div class="key_hand go_left" @click="go_left()"></div>
    <div class="key_hand go_right" @click="go_right()"></div>
    <div class="tittle">{{ tittle[index] }}</div>
    <div class="swper_box">
      <div
        class="swper_in_left"        
        ref="loan"
        @click="go_index(3)"
      >
      <img class="img" src="../../assets/img/swper.png" alt=""></div>
      <div class="swper_left" ref="bank" @click="go_index(4)">
        <img class="img" src="../../assets/img/swper.png" alt="">
      </div>
      <div
        class="swper_content"
        ref="consumption"
        @click="go_index(0)"
      >
      <img class="img" src="../../assets/img/swper.png" alt="">
      </div>
      <div
        class="swper_right"
        ref="manufacturer"
        @click="go_index(1)"
      ><img class="img" src="../../assets/img/swper.png" alt=""></div>
      <div
        class="swper_in_right"
        ref="science"
        @click="go_index(2)"
      ><img class="img" src="../../assets/img/swper.png" alt=""></div>
    </div>
    <div class="left_radius_box"></div>
  </div>
</template>

<script>
export default {
  name: "Company",
  data() {
    return {
      tittle: ["助贷机构", "银行", "消费场景", "厂商", "科技"],
      index: 0,
    };
  },
  watch: {
    index(val) {
      if (val == 0) {
        [
          this.$refs.loan.className,
          this.$refs.bank.className,
          this.$refs.consumption.className,
          this.$refs.manufacturer.className,
          this.$refs.science.className,
        ] = [
          "swper_in_left",
          "swper_left",
          "swper_content",
          "swper_right",
          "swper_in_right",
        ];
      } else if (val == 1) {
        [
          this.$refs.loan.className,
          this.$refs.bank.className,
          this.$refs.consumption.className,
          this.$refs.manufacturer.className,
          this.$refs.science.className,
        ] = [
          "swper_in_right",
          "swper_in_left",
          "swper_left",
          "swper_content",
          "swper_right",
        ];
      } else if (val == 2) {
        [
          this.$refs.loan.className,
          this.$refs.bank.className,
          this.$refs.consumption.className,
          this.$refs.manufacturer.className,
          this.$refs.science.className,
        ] = [
          "swper_right",
          "swper_in_right",
          "swper_in_left",
          "swper_left",
          "swper_content",
        ];
      } else if (val == 3) {
        [
          this.$refs.loan.className,
          this.$refs.bank.className,
          this.$refs.consumption.className,
          this.$refs.manufacturer.className,
          this.$refs.science.className,
        ] = [
          "swper_content",
          "swper_right",
          "swper_in_right",
          "swper_in_left",
          "swper_left",
        ];
      } else if (val == 4) {
        [
          this.$refs.loan.className,
          this.$refs.bank.className,
          this.$refs.consumption.className,
          this.$refs.manufacturer.className,
          this.$refs.science.className,
        ] = [
          "swper_left",
          "swper_content",
          "swper_right",
          "swper_in_right",
          "swper_in_left",
        ];
      }
    },
  },
  methods: {
    go_left() {
      if (this.index == 0) {
        this.index = 4;
      } else {
        this.index--;
      }
    },
    go_right() {
      if (this.index == 4) {
        this.index = 0;
      } else {
        this.index++;
      }
    },
    go_index(e) {
      this.index = e;
    },
  },
};
</script>

<style scoped>
@keyframes opacity_change {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}
.swper_box {
  width: 100vw;
  position: relative;
  overflow: hidden;
  height: 100vw;
  pointer-events: none;
}
.key_hand {
  position: absolute;
  width: 1.5364583333333333vw;
  height: 1.5364583333333333vw;
  top: 13.541666666666666vw;
  cursor: pointer;
}
.go_left {
  background: url("../../assets/img/go_left.png");
  background-size: 100% 100%;
  left: 42.239583333333336vw;
}
.go_right {
  background: url("../../assets/img/go_right.png");
  background-size: 100% 100%;
  left: 56.276041666666664vw;
}
.tittle {
  width: 7.291666666666667vw;
  height: 2.5520833333333335vw;
  font-size: 1.8229166666666667vw;
  font-family: HYRuiHuSongW;
  color: #5dc5ee;
  line-height: 2.5520833333333335vw;
  text-align: center;
  position: absolute;
  top: 12.942708333333334vw;
  left: 46.380208333333336vw;
}
.swper_content {
  
  position: absolute;
  width: 45.494791666666664vw;
  height: 21.276041666666668vw;

  top: 19.244791666666668vw;
  left: 27.500000000000004vw;
  transition: all 1s;
  cursor: pointer;
  pointer-events: auto;
  
}
.swper_left {
  position: absolute;
  width: 19.791666666666664vw;
  height: 9.010416666666666vw;
  top: 25.208333333333332vw;
  left: 2.5520833333333335vw;
  opacity: 0.7;
  transition: all 1s;
  cursor: pointer;
  pointer-events: auto;
}
.swper_left:hover {
  /* animation-name: opacity_change;
  animation-duration: 1s;
  animation-iteration-count: infinite; */
  opacity: 1;
}
.swper_right:hover {
  /* animation-name: opacity_change;
  animation-duration: 1s;
  animation-iteration-count: infinite; */
  opacity: 1;
}
.swper_in_left {
  position: absolute;
  width: 19.791666666666664vw;
  height: 9.010416666666666vw;
  top: 25.208333333333332vw;
  left: -19.791666666666664vw;
  opacity: 0;
  transition: all 1s;
  cursor: pointer;
  pointer-events: auto;
}
.swper_right {
  position: absolute;
  width: 19.791666666666664vw;
  height: 9.010416666666666vw;
  top: 25.208333333333332vw;
  left: 77.65625vw;
  opacity: 0.5;
  transition: all 1s;
  cursor: pointer;
  pointer-events: auto;
}
.swper_in_right {
  position: absolute;
  width: 19.791666666666664vw;
  height: 9.010416666666666vw;
  top: 25.208333333333332vw;
  left: 100.65625vw;
  opacity: 0;
  transition: all 1s;
  cursor: pointer;
  pointer-events: auto;
}
.img{
  width: 100%;
  height: 100%;
}
/* .left_radius_box{
  position: absolute;
    width: 37vw;
    height: 37vw;
    top: 10vw;
    left: -25vw;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(11, 13, 60, .1),rgba(10, 14, 60, 0));
    pointer-events: none;
} */
</style>